<script setup lang="ts">
import { reactive } from 'vue'
import {
  NCard,
  NFlex,
  NGrid,
  NGridItem,
  NDivider,
  NForm,
  NFormItem,
  NInput,
  NRadioGroup,
  NRadio,
  NTabs,
  NTabPane,
  NButton,
  NSpace
} from 'naive-ui'
import type { FormRules } from 'naive-ui'
import { useNaiveForm } from '@/hooks/common/form'
import Icon from '@/components/custom/icon.vue'
import {
  UserRole as RoleIcon,
  Email as EmailIcon,
  Calendar as CalendarIcon,
  User as UserIcon,
  Phone as PhoneIcon
} from '@vicons/carbon'
import { useUserStore } from '@/stores'
import AvatarEdit from '@/components/custom/avatar-edit.vue'
import { useEditUser } from '@/api'
import { router } from '@/router'

const userGenderOptions = [
  {
    label: '男',
    value: '1'
  },
  {
    label: '女',
    value: '0'
  }
]

const userStore = useUserStore()

const baseRules: FormRules = {
  nickname: {
    required: true,
    trigger: ['blur', 'input'],
    message: '昵称不能为空'
  },
  phone: {
    required: true,
    trigger: ['blur', 'input'],
    message: '手机号码不能为空'
  },
  email: {
    required: true,
    trigger: ['blur', 'input'],
    message: '邮箱不能为空'
  }
}

const passRules: FormRules = {
  oldPass: {
    required: true,
    trigger: ['blur', 'input'],
    message: '旧密码不能为空'
  },
  newPass: {
    required: true,
    trigger: ['blur', 'input'],
    message: '新密码不能为空'
  },
  confirmPass: {
    required: true,
    trigger: ['blur', 'input'],
    message: '确认密码不能为空'
  }
}

const { formRef, validate, restoreValidation } = useNaiveForm()

const profileMedel = reactive({
  id: userStore.uid,
  nickname: userStore.nickname,
  phone: userStore.phone,
  email: userStore.email,
  gender: userStore.gender
})

const passModel = reactive({
  oldPass: '',
  newPass: '',
  confirmPass: ''
})

const handleUpdateinfo = async () => {
  validate()
  await useEditUser(profileMedel).then(({ data }) => {
    if (data === true) {
      window.$message?.success('修改成功')
      userStore.loadUserStore()
    } else {
      window.$message?.error('修改失败')
    }
  })
}

const handleUpdatePass = () => {
  validate()
}

const handleClose = () => {
  restoreValidation()
  router.push('/manage/console')
}
</script>

<template>
  <n-grid x-gap="12" :cols="5">
    <n-grid-item span="2">
      <n-card title="个人信息">
        <n-flex justify="center" style="height: 150px">
          <AvatarEdit />
        </n-flex>
        <n-divider />
        <n-flex justify="space-between">
          <span> <Icon :icon="UserIcon" />用户名称 </span>
          <span>{{ userStore.username }}</span>
        </n-flex>
        <n-divider />
        <n-flex justify="space-between">
          <span><Icon :icon="PhoneIcon" />手机号码</span>
          <span>{{ userStore.phone }}</span>
        </n-flex>
        <n-divider />
        <n-flex justify="space-between">
          <span><Icon :icon="EmailIcon" />用户邮箱</span>
          <span>{{ userStore.email }}</span>
        </n-flex>
        <n-divider />
        <n-flex justify="space-between">
          <span><Icon :icon="RoleIcon" />所属角色</span>
          <span>12</span>
        </n-flex>
        <n-divider />
        <n-flex justify="space-between">
          <span><Icon :icon="CalendarIcon" />创建日期</span>
          <span>12</span>
        </n-flex>
        <n-divider />
      </n-card>
    </n-grid-item>
    <n-grid-item span="3">
      <n-card title="基本资料">
        <n-tabs>
          <n-tab-pane name="基本资料" tab="基本资料">
            <n-form
              ref="formRef"
              :model="profileMedel"
              label-placement="left"
              label-width="auto"
              :rules="baseRules"
            >
              <n-form-item label="用户昵称" path="nickname">
                <n-input v-model:value="profileMedel.nickname" />
              </n-form-item>
              <n-form-item label="手机号码" path="phone">
                <n-input v-model:value="profileMedel.phone" />
              </n-form-item>
              <n-form-item label="用户邮箱" path="email">
                <n-input v-model:value="profileMedel.email" />
              </n-form-item>
              <n-form-item label="性别" path="gender">
                <n-radio-group v-model:value="profileMedel.gender"
                  ><n-radio
                    v-for="item in userGenderOptions"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                /></n-radio-group>
              </n-form-item>
            </n-form>
            <n-space justify="end">
              <n-button type="primary" block secondary strong @click="handleUpdateinfo()">
                保存
              </n-button>
              <n-button type="error" block secondary strong @click="handleClose()"> 关闭 </n-button>
            </n-space>
          </n-tab-pane>
          <n-tab-pane name="修改密码" tab="修改密码">
            <n-form
              ref="formRef"
              :model="passModel"
              :rules="passRules"
              label-placement="left"
              label-width="auto"
            >
              <n-form-item label="旧密码" path="oldPass">
                <n-input v-model:value="passModel.oldPass" />
              </n-form-item>
              <n-form-item label="新密码" path="newPass">
                <n-input v-model:value="passModel.newPass" />
              </n-form-item>
              <n-form-item label="确认密码" path="confirmPass">
                <n-input v-model:value="passModel.confirmPass" />
              </n-form-item>
            </n-form>
            <n-space justify="end">
              <n-button type="primary" block secondary strong @click="handleUpdatePass()">
                保存
              </n-button>
              <n-button type="error" block secondary strong @click="handleClose()"> 关闭 </n-button>
            </n-space>
          </n-tab-pane>
        </n-tabs>
      </n-card>
    </n-grid-item>
  </n-grid>
</template>

<style scoped></style>
